<template>
  <el-popover :placement="placement" @show="show" :width="width" trigger="click">
    <template #reference>
      <slot v-if="$slots.default" />
      <el-link type="primary" v-else>{{ title }}</el-link>
    </template>
    <div class="p-1 list-b-4">
      <div class="flex-start-center p-4-8 list-r-8" v-if="$slots.head">
        <slot name="head"></slot>
      </div>
      <ElTableMxBox :tbody="tbody || table.tbody" :thead="thead" :loading="table.loading">
        <template #[key]="{ row, index }" v-for="(slot, key) in $slots" :key="key">
          <slot :name="key" :row="row" :index="index" />
        </template>
      </ElTableMxBox>
    </div>
  </el-popover>
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
//获取父级数据
const props = withDefaults(
  defineProps<{
    width?: number;
    title?: string;
    thead?: any;
    tbody?: any;
    placement?: string;
  }>(),
  {
    title: '查看',
    placement: 'right-start',
    width: 800,
    thead: [],
  },
);
const table = reactive({
  loading: false,
  tbody: [],
})
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'show', table: any): void;
}>();
const show = () => {
  if (!!!props.tbody) {
    table.loading = true
  }
  emit('show', table)
}
</script>
<style scoped lang="scss"></style>
